<template>
	<view class="img-add">
		<view class="main">
			<view class="img-upload">
				<image class="img-preview" :src="murl" mode=""></image>
				<view class="upload">
					<u-upload
						@afterRead="getImg"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="1"
						uploadText="点击上传"
					></u-upload>
				</view>
			</view>
			<view class="img-list">
				<u-picker :show="show" :columns="columns" @confirm="getFlv" @cancel="bindCancel"></u-picker>
				<view class="img-fl">
					<view class="text">分类 : {{flv}}</view>
					<view class="btn" @click="bindCancel">点击选择</view>
				</view>
				<view class="name">
					<view class="text">名称 : </view>
					  <u--input
					    placeholder="请输入壁纸名称"
					    border="surround"
					    v-model="namev"
					  ></u--input>
				</view>
			</view>
			<u-button @click="getUpload" type="primary" text="点击添加壁纸"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				murl:null,
				show:false,
				columns:[
					[]
				],
				flv:"未选择",
				brr:[],
				namev:null,
				surl:null
			};
		},
		onLoad() {
			this.onFl()
			this.juUser()
		},
		methods:{
			juUser(){
				const open = uni.getStorageSync('open')
				const db = uniCloud.database();
				db.collection('bz-boss').where({
					openid:open
				}).get()
				.then(res=>{
					console.log(res.result.data.length,'返回结果')
					const lg = res.result.data.length
					if(lg==0){
						uni.reLaunch({
							url:'/pages/index/index'
						})
					}
				})
			},
			onFl(){
				const db = uniCloud.database();
				db.collection('bz-tag').orderBy("tim", "desc").get()
				.then(res=>{
					const arr = res.result.data
					const len = res.result.data.length
					for(let i=0;i<len;i++){
						this.columns[0] = this.columns[0].concat(arr[i].tag)
					}
				})
			},
			getImg(e){
				console.log(e)
				this.murl = e.file[0].url
			},
			getFlv(e){
				console.log(e.value[0],'flvvv')
				this.flv = e.value[0]
				this.bindCancel()
			},
			bindCancel(){
				console.log(11111)
				this.show = !this.show
			},
			getUpload(){
				if(this.murl==null){
					uni.showToast({
						icon:'error',
						title:'请添加壁纸'
					})
				}else if(this.flv=="未选择"){
					uni.showToast({
						icon:'error',
						title:'请选择分类'
					})
				}else if(this.namev==null){
					uni.showToast({
						icon:'error',
						title:'请填写壁纸名称'
					})
				}else{
					const tim = Date.now()
					const nem = tim+this.namev+'.jpg'
					console.log(nem,'名字s')
					uniCloud.uploadFile({
							filePath: this.murl,
							cloudPath: nem
					}).then(res=>{
						console.log(res.fileID,'sssccc')
						this.surl = res.fileID
						this.urlUpload()
					})
				}
			},
			urlUpload(){
				const db = uniCloud.database();
				db.collection('bz-list').add({
					"img": {
						"url": this.surl,
						"tag": this.flv,
						"name": this.namev,
						"sjc": Date.now()
					}
				}).then(res=>{
					console.log("上传成功")
					uni.showToast({
						icon:'success',
						title:'添加成功'
					}).then(res=>{
						uni.navigateBack()
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.img-add{
		padding: 25rpx;
		.img-upload{
			display: flex;
			.img-preview{
				width: 310rpx;
				height: 440rpx;
				border-radius: 10rpx;
			}
			.upload{
				margin-inline-start: 15rpx;
			}
		}
		.img-list{
			margin-top: 15rpx;
			.img-fl{
				display: flex;
				align-items: center;
				margin: 8rpx;
				.btn{
					width: 140rpx;
					height: 60rpx;
					background: #28c139;
					color: #fff;
					text-align: center;
					line-height: 1.8;
					border-radius: 10rpx;
					margin-left: 8rpx;
				}
			}
			.name{
				display: flex;
				align-items: center;
				margin: 8rpx;
			}
		}

	}
</style>
